<template>
  <div id="app">
    <h2>测试题</h2>
    <SubjectItem :list="list" @change="changefn" @submit="submit"></SubjectItem>
    <FlagItem :list="list"></FlagItem>
  </div>
</template>

<script>
import FlagItem from './components/FlagItem.vue';
import SubjectItem from './components/SubjectItem.vue';

export default {
  components:{
    SubjectItem,
    FlagItem
  },
  data(){
    return {
      list:[]
    }
  },
  mounted(){
    this.list=Array(5).fill('').map((item,index)=>({
      num1:Math.floor(Math.random()*10),
      num2:Math.floor(Math.random()*10),
      result:'',
      status:'未完成',
      id:index
    }))
  },
  methods:{
    changefn(newvalue,id){
      this.list.forEach(item=>{
        if(item.id===id){
        item.result=newvalue
        console.log(item.result)
        }
      })
    },

     submit(id) {
      this.list.forEach(item => {
        if (item.id === id) { 
          if (!item.result) {
            alert('请输入计算结果')
            item.status = '未完成'
          } else if (item.num1 + item.num2 == item.result) {
            item.status = '正确'
          } else if (item.num1 + item.num2 !== item.result) {
            item.status = '错误'
          }
        }

      })
    }
  }
};
</script>

<style>
body {
  background-color: #eee;
}

#app {
  background-color: #fff;
  width: 500px;
  margin: 50px auto;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  padding: 2em;
}
</style>
